<!--  -->
<template>
  <div class="searchResult">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value" :options="option" disabled />
      <van-dropdown-item  title="价格" v-model="value1" :options="option1" @change="change"/>
      <van-dropdown-item title="分类" v-model="value2" :options="option2" @change="change2" />
    </van-dropdown-menu>
    <div class="result">
      <div class="res_box" v-for="item in searchResult" :key="item.id" @click="toDetail(item.id)">
        <GoodsBox :data="item"></GoodsBox>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, ref} from 'vue'
import {useRouter} from 'vue-router'
import GoodsBox from '@/components/GoodsBox.vue'
export default defineComponent({
  name: 'SearchResult',
  components: {
    GoodsBox
  },
  props: {
    searchResult: {
      type: Array,
      default() {
        return []
      }
    },
    filterCategory: {
      type: Array,
      default() {
        return []
      }
    }
  },
  setup(props, {emit}) {
    const router = useRouter()
    const value = ref(0)
    const value1 = ref('');
    const value2 = ref(0);
    const option = [
      {text: '综合', value: 0}
    ]
    let option2 = []
    props.filterCategory.forEach((item, index)=> {
      option2.push({text: item.name, value: index})
    })
    console.log(option2);
    const change2 = (value) => {
      emit()
    }
    let option1 = [
      { text: '价格由低到高', value: 0 },
      { text: '价格由高到低', value: 1 },
    ];
    // const option2 = [
    //   { text: '全部', value: 0 },
    //   { text: '居家', value: 1 },
    //   { text: '洗护', value: 2 },
    // ];
    const toDetail = (id) => {
      router.push({
        path: '/detail',
        query: {
          id
        }
      })
    }
    const change = (value) => {
      emit('onchange', value)
    }
    return {
      value,
      value1,
      value2,
      option1,
      option2,
      option,
      toDetail,
      change,
      change2
    }
  }
})
</script>

<style lang="scss" scoped>
  .result {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-flow: wrap;
  }
  .res_box {
    margin-top: 20px;
    width: 48%;
    height: 480px;
    background-color: #fff;
    margin-left: 10px;
  }
</style>